<template>
<div>
  <Row type="flex" :gutter="20" justify="space-between">
    <Col span="8">
      <div >
<!--        <Scroll height="600px" >-->
          <Card >
            <div style="height: 600px;overflow: auto">
              <Tree :data="data6" :render="renderContent" :load-data="loadData" @on-select-change="getAreaInfo" class="demo-tree-render"></Tree>
            </div>
          </Card>
<!--        </Scroll>-->
      </div>
    </Col>
    <Col span="16">
      <Card>
        <Tabs type="card" :animated="false" @on-click="tabChange" v-model="tabIndex"  name="tab1" >
          <TabPane label="用户列表" name="list" tab="tab1">
            <Table border :columns="columns12" :data="codeData">
              <template slot-scope="{ row, index }" slot="action">
                <Button type="primary" size="small" style="margin-right: 5px" @click="updateCode(row)">修改</Button>
              </template>
            </Table>
          </TabPane>
           <TabPane label="配置模板" name="visaList" v-if="tabShow===true" tab="tab1">
             <Tabs type="card"  v-model="visaIndex"  @on-click="visaTabChange" name="visaTab">
               <TabPane label="配置死亡证明模板" name="swList"  tab="visaTab">
               <Table border :columns="visaColumns" :data="swVisaData" :row-class-name="RowClassName">
                 <template slot-scope="{ row }" slot="compareNew">
                   <span>{{ row.new }}</span>
                 </template>
                 <template slot-scope="{ row }" slot="compareOld">
                   <span>{{ row.old }}</span>
                 </template>
                 <!--               <template slot-scope="{ row, index }" slot="action">-->
                 <!--                 <Button type="primary" size="small" style="margin-right: 5px" @click="updateCodeVisa(row)">修改</Button>-->
                 <!--               </template>-->
               </Table>
             </TabPane>
               <TabPane label="配置居住证明模板" name="jzList"  tab="visaTab">
                 <Table border :columns="visaColumns" :data="VisaData" :row-class-name="RowClassName">
                   <template slot-scope="{ row }" slot="compareNew">
                     <span>{{row.new }}</span>
                   </template>
                   <template slot-scope="{ row }" slot="compareOld">
                     <span>{{ row.old }}</span>
                   </template>
                 </Table>
               </TabPane>
             </Tabs>
             <div style="display: flex;justify-content: right;margin-top: 10px">
               <Upload action="http://120.27.63.37:38081/api/ac/file/fileCommonService/upLoadFiles"  :before-upload="beforeUpload"  >
                 <Button icon="ios-cloud-upload-outline">上传文件</Button>
               </Upload>
               <Button icon="ios-cloud-upload-outline" @click="updateVis" style="margin-left: 20px">确认更新</Button>
             </div>
           </TabPane>
          <TabPane label="免密登陆" name="mianmi" tab="tab1">

            <div>
              <Form :model="yibaoItem" :label-width="100">
                <span>医保数据:</span>
<!--                <div>-->
<!--                <FormItem label="id">-->
<!--                  <Input v-model="yibaoItem.id" placeholder=""></Input>-->
<!--                </FormItem>-->
<!--                </div>-->
                    <div>
                      <FormItem label="company_code">
                        <Input v-model="yibaoItem.company_code" placeholder=""></Input>
                      </FormItem>
                    </div>
                    <div>
                      <FormItem label="login_name">
                        <Input v-model="yibaoItem.login_name" placeholder=""></Input>
                      </FormItem>
                    </div>
                    <div>
                      <FormItem label="社区名称">
                      <Input v-model="yibaoItem.sqmc" placeholder=""></Input>
                      </FormItem>
                    </div>
                    <div>
                      <FormItem label="dwbh">
                      <Input v-model="yibaoItem.dwbh" placeholder=""></Input>
                      </FormItem>
                    </div>
                    <div>
                      <Button icon="ios-cloud-upload-outline"  @click="yibaoInsert" style="margin-left: 20px">创建数据</Button>
                      <Button icon="ios-cloud-upload-outline"  style="margin-left: 20px" @click="outUpdate">确认更新</Button>
                      <Button icon="ios-cloud-upload-outline" @click="yiBaoBySqmcList" style="margin-left: 20px" v-if="yibaoItem.buttonShow">查找数据</Button>
                    </div>
                    <div>

                  </div>

              </Form>
            </div>

          </TabPane>
<!--          <TabPane label="用户列表" name="list2" tab="tab1">-->
<!--            s-->
<!--            <div id="test" contenteditable style="width: 300px ; height: 300px ;border: red 1px ;background-color:black" @drop="dragover($event)"  ></div>-->
<!--          </TabPane>-->
        </Tabs>
      </Card>
    </Col>
  </Row>
  <Modal
    v-model="yibaoModal1"
    title="匹配社区"
  >
    <Table border :columns="yibaoColumns" :data="yibaoList" >
      <template slot-scope="{ row }" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px" @click="update(row)">更新数据</Button>
      </template>
    </Table>
  </Modal>
<!--  <Modal-->
<!--    v-model="modal1"-->
<!--    title="Common Modal dialog box title"-->
<!--    @on-ok="ok"-->
<!--    @on-cancel="cancel">-->
<!--    <Form ref="formInline" :model="userForm" :rules="ruleInline" >-->
<!--      <FormItem prop="user">-->
<!--        <Input type="text" v-model="userForm.user" placeholder="Username">-->
<!--          <Icon type="ios-person-outline" slot="prepend"></Icon>-->
<!--        </Input>-->
<!--      </FormItem>-->
<!--      <FormItem prop="手机号">-->
<!--        <Input type="手机号" v-model="userForm.mobile" placeholder="手机号">-->
<!--          <Icon type="ios-lock-outline" slot="prepend"></Icon>-->
<!--        </Input>-->
<!--      </FormItem>-->
<!--    </Form>-->
<!--  </Modal>-->
</div>
</template>

<script>
import { getAuditSysOfficeList, getAuditSysUserList, saveAuditSysUser, getAuditVisaList, updateAuditVisaInfo, saveAuditElectronicVisa, yiBaoByCompanyCodeList, yiBaoBySqmcList, updateYiBaoInfo, saveyiBaoInfo } from '@/api/areaInfo'
import { getSign, createUpLoadFiles } from '@/api/common'
export default {
  name: 'gpi',
  data () {
    return {
      userForm: {
        user: '',
        mobile: ''
      },
      visaIndex: 'swList',
      swVisaData: [],
      id: '',
      modalShow: false,
      data6: [],
      tabIndex: 0,
      columns12: [
        { title: '账号', key: 'login_name' },
        { title: '姓名', key: 'name' },
        { title: '手机号', key: 'mobile' },
        { title: 'Action', slot: 'action', width: 150, align: 'center' }
      ],
      visaColumns: [
        { title: '原信息', slot: 'compareOld', align: 'right' },
        { title: '对比值', key: 'key', width: 100, align: 'center' },
        { title: '新信息', slot: 'compareNew', align: 'left' }
      ],
      VisaData: [],
      codeData: [],
      tabShow: false,
      company_code: '',
      updateData: [],
      // 修改模板入参
      Obj: {},
      visCompany_code: '',
      Form_id: '',
      Item_id: '',
      street: '',
      community: '',
      county: '',
      // 医保免密登陆
      yibaoItem: {
        id: '',
        company_code: '',
        login_name: '',
        dwbh: '',
        sqmc: '',
        buttonShow: false
      },
      yibaoList: [],
      yibaoColumns: [
        { title: '社区名称', key: 'sqmc' },
        { title: 'Action', slot: 'action', width: 150, align: 'center' }
      ],
      sqmc: '',
      yibaoModal1: false
    }
  },
  methods: {
    yibaoInsert () {
      saveyiBaoInfo(this.yibaoItem).then(res => {
        if (res.data.errcode === 0) {
          this.yiBaoByCompanyCodeList()
          this.$Notice.success({ title: '创建数据成功' })
        } else {
          this.$Notice.error({ title: '创建数据失败', desc: res.data.errmsg })
        }
      })
    },
    outUpdate () {
      updateYiBaoInfo(this.yibaoItem).then(res => {
        if (res.data.errcode === 0) {
          this.yiBaoByCompanyCodeList()
          this.$Notice.success({ title: '更新数据成功' })
        } else {
          this.$Notice.error({ title: '更新数据失败', desc: res.data.errmsg })
        }
      })
    },
    update (row) {
      let data = { id: row.id, company_code: this.visCompany_code }
      updateYiBaoInfo(data).then(res => {
        if (res.data.errcode === 0) {
          this.yiBaoByCompanyCodeList()
          this.yibaoModal1 = false
          this.$Notice.success({ title: '更新数据成功' })
        } else {
          this.$Notice.error({ title: '更新数据失败', desc: res.data.errmsg })
        }
      })
    },
    yiBaoBySqmcList () {
      let data = { sqmc: this.sqmc }
      yiBaoBySqmcList(data).then(res => {
        if (res.data.errcode === 0) {
          this.yibaoList = res.data.data
          this.yibaoModal1 = true
          console.log(res.data.data)
        }
      })
    },
    yiBaoByCompanyCodeList () {
      this.yibaoItem = {}
      let data = { company_code: this.visCompany_code }
      yiBaoByCompanyCodeList(data).then(res => {
        if (res.data.errcode === 0) {
          this.yibaoItem = res.data.data
        } else if (res.data.errmsg === '查询不到数据') {
          this.yibaoItem.buttonShow = true
        }
        console.log(res.data.data, 555)
      })
    },
    dragover (e) {
      // e.stopPropagation()
      // e.preventDefault()
      // console.log(e)
      // const upBox = document.querySelector(e)
      // if (!upBox) { return }
      // upBox.addEventListener('dragover', dragoverFile)
      // upBox.addEventListener('drop', dropFile)
      // upBox.addEventListener('dragleave', dragleaveFile)
      // function dragoverFile (e) {
      //   e.preventDefault()
      // }
      // function dragleaveFile (e) {
      // }
      // function dropFile (e) {
      //   e.preventDefault()
      //   let fileList = e.dataTransfer.files
      //   let file = fileList[0]
      //   console.log(file)
      //   // 在这里就可以拿到拖拽的文件了，传到下一个函数进行处理
      //   // fileToBase64(file, callback)
      // }
    },

    RowClassName (row) {
      console.log(row.new === 'id')
      /* if (row.new !== row.old) {
        return 'demo-table-error-row'
      } else if (row.new === 'id') {
        console.log(554654646)
        return 'show'
      } else {
        return 'demo-table-info-row'
      } */
      if (row.new === 'id') {
        return 'show'
      } else if (row.new !== row.old) {
        return 'demo-table-error-row'
      } else {
        return 'demo-table-info-row'
      }
    },
    updateVis () {
      console.log(this.Obj, '修改入参')
      updateAuditVisaInfo(this.Obj).then(res => {
        if (res.data.errcode === 0) {
          let data = { company_code: this.visCompany_code }
          this.getAreaVis(data)
          this.$Notice.success({ title: '更新数据成功' })
        } else {
          this.$Notice.error({ title: '更新数据失败', desc: res.data.errmsg })
        }
      })
    },
    // 第二级别tab切换
    visaTabChange () {
      if (this.visaIndex === 'swList') {
        let swObj = {}
        if (this.swVisaData.length === 0) {
          this.id = '无信息'
        } else {
          this.id = this.swVisaData[0].id
          swObj = {
            catalogId: this.swVisaData[1].new,
            templateId: this.swVisaData[2].new,
            templateName: this.swVisaData[3].new,
            value: this.swVisaData[4].new,
            version: this.swVisaData[5].new,
            id: this.id,
            street: this.street,
            community: this.community,
            county: this.county
          }
        }
        this.Obj = swObj
        this.Item_id = '21210103001606506X5212000329000'
        this.Form_id = '178'
        this.Xml_id = 'siwangzhengming'
      }
      if (this.visaIndex === 'jzList') {
        let jzObj = {}
        if (this.VisaData.length === 0) {
          this.id = '无信息'
        } else {
          this.id = this.VisaData[0].id
          jzObj = {
            catalogId: this.VisaData[1].new,
            templateId: this.VisaData[2].new,
            templateName: this.VisaData[3].new,
            value: this.VisaData[4].new,
            version: this.VisaData[5].new,
            id: this.id,
            street: this.street,
            community: this.community,
            county: this.county
          }
        }
        this.Obj = jzObj
        this.Item_id = '11210103001606506X5212000329000'
        this.Form_id = '52'
        this.Xml_id = 'juzhuzhengmingVersion2'
      }
    },
    col (row) {
      // console.log(JSON.parse(JSON.stringify(row)) + 'sssss')
    },
    // 模板模态框ok事件
    visaClick () {

    },
    // 模板模态框close事件
    closeVisa () {},
    // 模板修改按钮
    updateCodeVisa (row) {
      this.visaShow = true
      this.company_code = row.company_code
      this.id = row.id
    //  console.log(this.id)
    },
    // 上传图片前转base64
    beforeUpload (file) {
      //   console.log(this.visaIndex, 'innnn')
      // console.log(file)
      let upPicData = {
        filePath: 'DZzz/LM/' + this.visCompany_code,
        fileName: file.name + '.jpg'
      }
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        let index = reader.result.indexOf('base64,') + 7
        upPicData.file = reader.result.substring(index)
        this.upPic(upPicData)
      }
      return false
    },
    // 上传图片
    upPic (obj) {
      let timeStep = new Date().getTime().toString()
      let param = {
        filePath: obj.filePath,
        fileName: obj.fileName,
        timestamp: timeStep
      }
      getSign(param).then(res => {
        if (res.data.errcode === 0) {
          let uploadParam = {
            sign: res.data.data.sign,
            timestamp: timeStep,
            filePath: obj.filePath,
            fileName: obj.fileName,
            file: obj.file
          }
          createUpLoadFiles(res.data.data.docking_url, uploadParam).then(res => {
            if (res.data.errcode === 0) {
              this.$Notice.success({ title: '上传图片成功' })
              if (this.id === '无信息') {
                let data = { company_code: this.visCompany_code,
                  form_id: this.Form_id,
                  item_id: this.Item_id,
                  xml_id: this.Xml_id,
                  xml_url: res.data.data
                }
                saveAuditElectronicVisa(data).then(res => {
                  if (res.data.errcode === 0) {
                    let datas = { company_code: this.visCompany_code }
                    this.getAreaVis(datas)
                    this.$Notice.success({ title: '新建数据成功' })
                  } else {
                    this.$Notice.error({ title: '新建数据失败', desc: res.data.errmsg })
                  }
                })
              } else {
                let data = { id: this.id, xml_url: res.data.data }
                updateAuditVisaInfo(data).then(res => {
                  let data = { company_code: this.visCompany_code }
                  if (res.data.errcode === 0) {
                    this.$Notice.success({ title: '更改图片信息成功' })
                  } else {
                    this.$Notice.error({ title: '更改图片信息失败', desc: res.data.errmsg })
                  }
                  this.getAreaVis(data)
                })
              }
            } else {
              this.$Notice.error({ title: '上传失败', desc: res.data.errmsg })
            }
          })
        } else {
          this.$Notice.error({ title: '上传失败', desc: res.data.errmsg })
        }
      })
    },
    renderContent (h, { root, node, data }) {
      return h('span', {
        style: {
          display: 'inline-block',
          width: '100%'
        }
      }, [
        h('span', [
          h('span', '街道'),
          h('Icon', {
            props: {
              type: 'ios-paper-outline'
            },
            style: {
              marginRight: '8px'
            }
          }),
          h('span', data.title)
        ])/*,
        h('span', {
          style: {
            display: 'inline-block',
            float: 'right',
            marginRight: '32px'
          }
        }, [
          h('Button', {
            props: Object.assign({}, this.buttonProps, {
              icon: 'ios-add'
            }),
            style: {
              marginRight: '8px'
            },
            on: {
              click: () => { this.append(data) }
            }
          }),
          h('Button', {
            props: Object.assign({}, this.buttonProps, {
              icon: 'ios-remove'
            }),
            on: {
              click: () => { this.remove(root, node, data) }
            }
          })
        ]) */
      ])
    },
    append (data) {
      const children = data.children || []
      children.push({
        title: 'appended node',
        expand: true
      })
      this.$set(data, 'children', children)
    },
    remove (root, node, data) {
      const parentKey = root.find(el => el === node).parent
      const parent = root.find(el => el.nodeKey === parentKey).node
      const index = parent.children.indexOf(data)
      parent.children.splice(index, 1)
    },
    init (param) {
      getAuditSysOfficeList(param).then(ret => {
        //   console.log(ret.data.errcode)
        if (ret.data.errcode === 0) {
          this.data6 = this.getTree(ret.data.data.result)
        }
      })
    },
    codeInit (param) {
      getAuditSysUserList(param).then(ret => {
        //   console.log(ret.data.errcode)
        if (ret.data.errcode === 0) {
          this.codeData = ret.data.data.result
        }
      })
    },
    getTree (tree) {
      //  console.log(tree)
      let arr = []
      tree.forEach(item => {
        let obj = {
          title: item.name,
          id: item.id,
          parent_ids: item.parent_ids,
          grade: item.grade,
          code: item.code,
          children: [],
          loading: false
        }
        arr.push(obj)
      })
      //  console.log(arr)
      return arr
    },
    loadData (item, callback) {
      let param = {
        grade: parseInt(item.grade) + 1,
        parent_ids: item.parent_ids + item.id + ','
      }
      if (item.grade === '3') {
        this.county = item.title
      } else if (item.grade === '4') {
        this.street = item.title
      }
      let data = []
      getAuditSysOfficeList(param).then(ret => {
      //  console.log(ret.data.errcode)
        if (ret.data.errcode === 0) {
          data = this.getTree(ret.data.data.result)
          callback(data)
        }
      })
    },
    tabChange () {

    },
    removeCode () {

    },
    updateCode (data) {
      this.modalShow = true
      // console.log(data)
      // updateAuditSysUserInfo(param).then(ret => {
      //   console.log(ret.data.errcode)
      //   if (ret.data.errcode === 0) {
      //     this.data6 = this.getTree(ret.data.data.result)
      //   }
      // })
    },
    getAreaInfo (val) {
      let grade = val[0].grade
      this.grade = grade
      this.community = val[0].title
      if (val[0].title.toString().indexOf('街道') !== -1) {
        let index = val[0].title.toString().lastIndexOf('街道')
        let end = val[0].title.toString().length
        this.sqmc = val[0].title.toString().substring(index + 2, end)
      } else {
        this.sqmc = val[0].title.toString()
      }
      if (grade === '5') {
        let data = { company_code: val[0].code }
        this.visCompany_code = val[0].code
        this.getAreaVis(data)
        this.tabShow = true
        this.yiBaoByCompanyCodeList()
      }
      let param = {
        company_id: val[0].id
      }
      this.codeInit(param)
    },
    addCode () {
      saveAuditSysUser(param).then(ret => {
        if (ret.data.errcode === 0) {
          this.data6 = this.getTree(ret.data.data.result)
        }
      })
    },
    getAreaVis (data) {
      this.VisaData = []
      this.swVisaData = []
      getAuditVisaList(data).then(res => {
        let temp = res.data.data.result
        temp.forEach((item) => {
          if (item.item.form_id === '52') {
            this.VisaData = []
            this.VisaData.push({ id: item.item.id, new: 'id' })
            this.VisaData.push({ id: 0, key: 'catalog_id', new: item.xml_map.catalogId, old: item.item.catalog_id })
            this.VisaData.push({ id: 1, key: 'template_id', new: item.xml_map.templateId, old: item.item.template_id })
            this.VisaData.push({ id: 2, key: 'template_name', new: item.xml_map.templateName, old: item.item.template_name })
            this.VisaData.push({ id: 3, key: '区域', new: item.xml_map.value, old: item.item.issue_unitname })
            this.VisaData.push({ id: 4, key: '版本', new: item.xml_map.version, old: item.item.version })
          }
          if (item.item.form_id === '178') {
            this.swVisaData = []
            this.swVisaData.push({ id: item.item.id, new: 'id' })
            this.swVisaData.push({ id: 0, key: 'catalog_id', new: item.xml_map.catalogId, old: item.item.catalog_id })
            this.swVisaData.push({ id: 1, key: 'template_id', new: item.xml_map.templateId, old: item.item.template_id })
            this.swVisaData.push({ id: 2, key: 'template_name', new: item.xml_map.templateName, old: item.item.template_name })
            this.swVisaData.push({ id: 3, key: '区域', new: item.xml_map.value, old: item.item.issue_unitname })
            this.swVisaData.push({ id: 4, key: '版本', new: item.xml_map.version, old: item.item.version })
          }
        })
        this.visaTabChange(this.visaIndex)
      })
    }
  },
  mounted () {
    let param = {
      grade: '3'
    }
    this.init(param)
  }
}
</script>

<style >
  .ivu-table .demo-table-info-row td{
    background-color: white;
    color: #515A6E;
  }
  .ivu-table .demo-table-error-row td{
    background-color: #F0F8FF;
    color: #5d6c7b;
  }
  .ivu-table .show td{
    display: none;
  }
</style>
